<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	xmlns:t="http://myfaces.apache.org/tomahawk">

<ui:composition template="/template/template-padrao.xhtml">

	<ui:define name="titulo">Manter veículos</ui:define>

	<ui:define name="baseCorpo">
	
	<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/js/jquery.meio.mask.js" ></script>
	
		<h:form id="veiculoForm">
		
			<script type="text/javascript">
	
				jQuery(function(){
					
					jQuery('table[id*=acessorios] > tbody > tr > td > label').css("font-weight", "normal");
					
					jQuery('input[id*=placa]').setMask({ mask : 'aaa9999', autoTab: false});
					
					jQuery('input[id*=anoFab]').setMask({ mask : '9999', autoTab: false});
					jQuery('input[id*=anoMod]').setMask({ mask : '9999', autoTab: false});
					
					jQuery('input[id*=portas]').setMask({ mask : '9', autoTab: false});
					jQuery('input[id*=potencia]').setMask({ mask : '999', autoTab: false});
					jQuery('input[id*=cilindrada]').setMask({ mask : '999', autoTab: false});
					
					jQuery('input[id*=placa]').focus();
					
				});
				
			</script>
		
			<h1 class="titulo-tela">Manter veículos</h1>

			<p:panel id="panelVeiculo">
			
				<h1 class="ui-panel-titlebar ui-widget-header ui-corner-all">Dados cadastrais</h1>
			
				<table cellspacing="10" width="100%">
					<tr>
						<td colspan="3">
							<h:outputLabel for="placa" value="* Placa:" />
							<br />
							<p:inputText id="placa"
									value="#{manterVeiculosBean.veiculo.nrPlaca}"
								label="Placa" style="width:65px;" >
							</p:inputText>
			            </td>
					</tr>
					<tr>
						<td width="250px;">
							<h:outputLabel for="fabricante" value="* Fabricante:" />
							<br />
							<h:selectOneMenu id="fabricante" label="Fabricante" style="width:160px;"
								styleClass="ui-inputfield ui-widget ui-state-default ui-corner-all"
								value="#{manterVeiculosBean.veiculo.fabricante.id}" >
							    <f:selectItems value="#{manterVeiculosBean.todosFabricantes}" var="fab"
							    	itemValue="#{fab.value}" itemLabel="#{fab.label}"/>
						    	<f:ajax event="change" render="modelo" />
							</h:selectOneMenu>
			            </td>
						<td width="250px;">
							<h:outputLabel for="modelo" value="* Modelo:" />
							<br />
							<h:selectOneMenu id="modelo" style="width:160px;" label="Modelo"
								styleClass="ui-inputfield ui-widget ui-state-default ui-corner-all"
									value="#{manterVeiculosBean.veiculo.modelo.id}">
								    <f:selectItems value="#{manterVeiculosBean.modelosPorFabricante}" var="modelo"
								    	itemValue="#{modelo.value}" itemLabel="#{modelo.label}"/>
							</h:selectOneMenu>
			            </td>
					</tr>
					<tr>
						<td>
							<h:outputLabel for="chassi" value="Chassi:" />
							<br />
							<p:inputText id="chassi" maxlength="17"
								value="#{manterVeiculosBean.veiculo.chassi}" label="Chassi" />
			            </td>
						<td>
							<h:outputLabel for="renavam" value="Renavam:" />
							<br />
							<p:inputText id="renavam" maxlength="9"
								value="#{manterVeiculosBean.veiculo.renavam}" label="Renavam" />
			            </td>
			            <td>
							<h:outputLabel for="uf" value="Estado:" />
							<br />
							<h:selectOneMenu id="uf" style="width:160px;" label="Estado"
								styleClass="ui-inputfield ui-widget ui-state-default ui-corner-all"
									value="#{manterVeiculosBean.veiculo.uf}">
								    <f:selectItems value="#{manterVeiculosBean.todasUfs}" var="uf"
								    	itemValue="#{uf.value}" itemLabel="#{uf.label}"/>
							</h:selectOneMenu>
			            </td>
					</tr>
					<tr>
						<td width="250px;">
							<h:outputLabel for="combustivel" value="Combustível:" />
							<br />
							<h:selectOneMenu id="combustivel" label="Combustível" style="width:160px;"
								styleClass="ui-inputfield ui-widget ui-state-default ui-corner-all"
								value="#{manterVeiculosBean.veiculo.combustivel.id}" >
							    <f:selectItems value="#{manterVeiculosBean.todosCombustiveis}" var="comb"
							    	itemValue="#{comb.value}" itemLabel="#{comb.label}"/>
							</h:selectOneMenu>
			            </td>
						<td width="250px;">
							<h:outputLabel for="cambio" value="Cambio:" />
							<br />
							<h:selectOneMenu id="cambio" style="width:160px;" label="Cambio"
								styleClass="ui-inputfield ui-widget ui-state-default ui-corner-all"
									value="#{manterVeiculosBean.veiculo.cambio.id}">
								    <f:selectItems value="#{manterVeiculosBean.todosCambios}" var="cambio"
								    	itemValue="#{cambio.value}" itemLabel="#{cambio.label}"/>
							</h:selectOneMenu>
			            </td>
					</tr>
					<tr>
						<td>
							<h:outputLabel for="anoFab" value="Ano de fabricação:" />
							<br />
							<p:inputText id="anoFab"
								value="#{manterVeiculosBean.veiculo.anoFabricacao}"
								label="Ano de fabricação" style="width:45px;" >
							</p:inputText>
			            </td>
						<td>
							<h:outputLabel for="anoMod" value="Ano do modelo:" />
							<br />
							<p:inputText id="anoMod"
								value="#{manterVeiculosBean.veiculo.anoModelo}"
								label="Ano do modelo" style="width:45px;" >
							</p:inputText>
			            </td>
					</tr>
					<tr>
						<td>
							<h:outputLabel for="cor" value="Cor:" />
							<br />
							<p:inputText id="cor" maxlength="20"
								value="#{manterVeiculosBean.veiculo.cor}" label="Cor" />
			            </td>
						<td>
							<h:outputLabel for="portas" value="Portas:" />
							<br />
							<p:inputText id="portas" style="width:45px;" 
								value="#{manterVeiculosBean.veiculo.portas}" label="Portas" />
			            </td>
					</tr>
					<tr>
						<td>
							<h:outputLabel for="potencia" value="Potência (CV):" />
							<br />
							<p:inputText id="potencia" style="width:45px;" 
								value="#{manterVeiculosBean.veiculo.potencia}" label="Potência" />
			            </td>
						<td>
							<h:outputLabel for="cilindrada" value="Cilindrada:" />
							<br />
							<p:inputText id="cilindrada" style="width:45px;" 
								value="#{manterVeiculosBean.veiculo.cilindrada}" label="Cilindrada" />
			            </td>
					</tr>
					<tr>
						<td colspan="3">
							<br />
							<p:separator style="height:3px" />  
							<br />
			            </td>
					</tr>
					<tr>
						<td colspan="3">
							<h:outputLabel for="acessorios" value="Acessórios:" />
							<br />
							<t:selectManyCheckbox id="acessorios" layout="pageDirection" layoutWidth="3"
								value="#{manterVeiculosBean.veiculo.acessoriosAux}"
								 selectedClass="checkbox-itens">
								<f:selectItems value="#{manterVeiculosBean.todosAcessorios}" var="acessorio"
									itemLabel="#{acessorio.nmAcessorio}" itemValue="#{acessorio.id}" />
							</t:selectManyCheckbox>
			            </td>
					</tr>
					<tr>
						<td colspan="3">
							<br />
							<h:outputLabel for="observacao" value="Observações:" />
							<br />
							<p:inputTextarea id="observacao" 
								value="#{manterVeiculosBean.veiculo.observacao}"
								label="Observações" style="width:620px;height:80px;" />
			            </td>
					</tr>
				</table>
			</p:panel>
			
			<br />
			<div align="right">
				<p:commandButton id="botaoSalvar" value="Salvar" update="msgSistema, veiculoForm, listaRegistros" 
					actionListener="#{manterVeiculosBean.salvarVeiculo}" style="margin-left:5px;" />
				<p:commandButton id="botaoLimpar" value="Limpar" update="msgSistema, veiculoForm" 
					 actionListener="#{manterVeiculosBean.limparCampos}" style="margin-left:5px;" />
			</div>
		
		</h:form>
		
		<h:form id="listaRegistros">
			
			<br />
			<br />
			<p:accordionPanel autoHeight="false" collapsible="true" style="padding:0;">
			<p:tab title="Veículos">
			
				<p:dataTable id="listaVeiculos" var="veiculo" 
					paginator="true" rows="10" paginatorPosition="bottom"
					value="#{manterVeiculosBean.todosVeiculos}"
		            emptyMessage="Nenhum veículo encontrado">
		            
			        <p:column filterBy="#{veiculo.nrPlaca}" 
			                headerText="Placa" filterMatchMode="contains">
			            <h:outputText value="#{veiculo.nrPlaca}" />
			        </p:column>
			        
			         <p:column filterBy="#{veiculo.fabricante.nmFabricante}" 
			                headerText="Fabricante" filterMatchMode="contains">
			            <h:outputText value="#{veiculo.fabricante.nmFabricante}" />
			        </p:column>
			        
			        <p:column filterBy="#{veiculo.modelo.nmModelo}" 
			                headerText="Modelo" filterMatchMode="contains">
			            <h:outputText value="#{veiculo.modelo.nmModelo}" />
			        </p:column>
			        
			        <p:column filterBy="#{veiculo.cor}" 
			                headerText="Cor" filterMatchMode="contains">
			            <h:outputText value="#{veiculo.cor}" />
			        </p:column>
			        
			        <p:column filterBy="#{veiculo.combustivel.nmCombustivel}" 
			                headerText="Combustível" filterMatchMode="contains">
			            <h:outputText value="#{veiculo.combustivel.nmCombustivel}" />
			        </p:column>
			        
			        <p:column filterBy="#{veiculo.anoFabricacao}" 
			                headerText="Ano de fabricação" filterMatchMode="contains">
			            <h:outputText value="#{veiculo.anoFabricacao}" />
			        </p:column>
			
			        <p:column style="width:100px;" headerText="Ações">
			        	<p:commandButton update="veiculoDetalhesForm" image="ui-icon ui-icon-search" immediate="true"
			            	oncomplete="dialogVeiculoDetalhes.show()">
			               <f:setPropertyActionListener value="#{veiculo}"
			                    target="#{manterVeiculosBean.veiculoAux}" />
			            </p:commandButton>
			            <p:commandButton update="veiculoForm" image="ui-icon ui-icon-pencil" immediate="true">
			               <f:setPropertyActionListener value="#{veiculo}"
			                    target="#{manterVeiculosBean.veiculo}" />
			            </p:commandButton>
			            <p:commandButton oncomplete="confirmation.show()" image="ui-icon ui-icon-trash" immediate="true">
			               <f:setPropertyActionListener value="#{veiculo}"
			                    target="#{manterVeiculosBean.veiculoAux}" />
			            </p:commandButton>
			        </p:column>
			        
			    </p:dataTable>
			    
		    </p:tab>
			</p:accordionPanel>
		    
		</h:form>
		
		<h:form>
		    <p:confirmDialog message="Deseja excluir o veículo?"
						header="Confirmação" severity="alert" widgetVar="confirmation">
						
				<p:commandButton value="Sim" update="veiculoForm, msgSistema, listaRegistros" 
							oncomplete="confirmation.hide()" immediate="true"
							actionListener="#{manterVeiculosBean.excluirVeiculo}" />
				<p:commandButton value="Não" onclick="confirmation.hide()" type="button" immediate="true" /> 
						
			</p:confirmDialog>
		</h:form>
		
	<ui:include src="veiculodetalhes.xhtml" />

	</ui:define>

</ui:composition>
</html>